<template>
	<div class="my-content-within">
		<van-nav-bar title="个人中心" />
		<div class="abcde">
			<div class="my-information">
				<div class="my-active">
					<div class="my-within">
						<van-image
							round	
							width="1.2rem"
							height="1.2rem"
							:src="usersTokenPhoto.photo[0].content"
						/>
					

						<div class="nickname">
							<p>{{ id }}</p>
							<p>买到就是赚到~</p>
						</div>
					</div>
					<div class="my-iocn"></div>
				</div>
				<div class="my-notice">
					<van-icon name="cross" size="16" />
					<span>售票开始，有优惠时，通知我</span>
					<button>去开启</button>
				</div>
			</div>
			<div class="my-content-outside">
				<p class="order">我的订单</p>
				<div class="my-order">
					<van-grid>
						<van-grid-item icon="peer-pay" text="待支付" />
						<van-grid-item icon="goods-collect-o" text="我的购买" />
						<van-grid-item icon="star-o" text="我的收藏" />
						<van-grid-item icon="eye-o" text="我的足迹" />
					</van-grid>
				</div>
				<p class="order">购买福利</p>
				<div class="my-order">
					<van-grid>
						<van-grid-item icon="point-gift-o" text="购票好礼" />
						<van-grid-item icon="vip-card-o" text="VIP" />
						<van-grid-item icon="coupon-o" text="优惠卷" />
						<van-grid-item icon="points" text="购票积分" />
					</van-grid>
				</div>
				<p class="order">设置</p>
				<div class="my-exit">
					<p @click="changeAddress">收货地址</p>
				</div>
				<div class="my-exit">
					<p @click="changeCode">切换账号</p>
				</div>
				<div class="my-password">
					<p @click="revisePassword">修改密码</p>
					<van-overlay :show="show" @click="show = false">
						<div class="wrapper" @click.stop>
							<div class="block">
								<p>修改密码</p>
								<input type="text" v-model="oldPassword" placeholder="请输入原密码" />
								<input type="text" v-model="newPassword" placeholder="请输入修改密码" />
								<div class="btn">
									<van-button @click="cancel" type="default">取消</van-button>
									<van-button @click="confirm" type="success">确认</van-button>
								</div>
							</div>
						</div>
					</van-overlay>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import router from '../../router'
import { Toast } from 'vant'
// import { changePassword } from '../../api/Hu'
import Ajax from '../../api/axios'

const oldPassword = ref('')
const newPassword = ref('')
const show = ref(false)

// 回显账号
const user = JSON.parse(localStorage.getItem('usersToken'))
const { id } = user

// 回显头像
const usersTokenPhoto = JSON.parse(localStorage.getItem('usersToken'))||{}


// 更改密码
function revisePassword() {
	show.value = true
}

function cancel() {
	show.value = false
}

function confirm() {
	if (!oldPassword.value || !newPassword.value) {
		Toast({
			message: '请输入完整信息',
			position: 'bottom'
		})
		return
	} else {
		const user = JSON.parse(localStorage.getItem('user'))
		console.log(user)
		if (oldPassword.value !== user.password) {
			Toast({
				message: '请输入正确的原密码',
				position: 'bottom'
			})
			return
		}
		if (oldPassword.value === newPassword.value) {
			Toast({
				message: '新密码与旧密码一致',
				position: 'bottom'
			})
			return
		} else {
			const token = localStorage.getItem('TOKEN')
			Ajax({
				url: '/update/password',
				method: 'POST',
				data: {
					password: oldPassword.value,
					newPassword: newPassword.value
				}
			}).then(data => {
				if (data.code == 200) {
					router.push('/login')
					Toast({
						message: '修改成功，请重新登陆',
						position: 'bottom'
					})
				}
			})
		}
	}
}

// 收货地址
function changeAddress(){
	router.push('/mysetup')
}

// 切换账号
function changeCode() {
	localStorage.removeItem('autologin')
	router.push('/login')
}
</script>

<style lang="scss" scoped>
@import '../../styles/index.scss';
.my-content-within {
	background: $g01;
	.van-nav-bar {
		position: sticky;
		top: 0;
		z-index: 9;
	}
	.my-information {
		height: 150px;
		.my-active {
			display: flex;
			justify-content: space-between;
			.my-within {
				font-size: 18px;
				height: 70px;
				display: flex;
				align-items: center;
				margin-left: 15px;
				margin-top: 10px;
				.wrappers {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
				}
				.blocks {
					width: 120px;
					height: 120px;
					background-color: #fff;
				}
				.nickname {
					margin-left: 10px;
					color: #fff;
				}
				
			}
		}
		.my-notice {
			width: calc(100% - 60px);
			height: 40px;
			margin: auto;
			margin-top: 10px;
			padding: 0 15px;
			background: #fff;
			border-radius: 5px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			span {
				font-size: 14px;
			}
			button {
				border: 1px solid $g01;
				background: transparent;
				font-size: 16px;
				color: $g01;
			}
		}
	}

	.my-content-outside {
		height: calc(100% - 196px);
		background: #f1f1f1;
		overflow: hidden;
		.wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}

		.block {
			width: 300px;
			height: 220px;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			> input {
				width: 80%;
				height: 15%;
				border: 2px solid;
			}
			> .btn {
				display: flex;
				justify-content: space-between;
				.van-button {
					width: 80px;
					margin: 0 15px;
				}
			}
		}
		.order {
			font-size: 20px;
			margin: 10px 0 0 15px;
		}
		.my-order {
			width: calc(100% - 60px);
			height: 100px;
			font-size: 16px;
			background: #fff;
			margin: auto;
			margin-top: 15px;
			padding: 0 15px;
			border-radius: 5px;
			overflow: hidden;

			ul {
				margin-top: 10px;
				display: flex;
				justify-content: space-around;
				li {
					p {
						margin-top: 5px;
					}
				}
			}
		}
		.my-exit {
			width: calc(100% - 60px);
			height: 36px;
			font-size: 16px;
			background: #fff;
			margin: auto;
			margin-top: 15px;
			padding: 0 15px;
			border-radius: 5px;
			overflow: hidden;
			p {
				line-height: 36px;
				font-size: 18px;
			}
		}
		.my-password {
			width: calc(100% - 60px);
			height: 36px;
			font-size: 16px;
			background: #fff;
			margin: auto;
			margin-top: 15px;
			padding: 0 15px;
			border-radius: 5px;
			overflow: hidden;
			margin-bottom: 10px;
			p {
				line-height: 36px;
				font-size: 18px;
			}
		}
	}
}
</style>
